<template>
	<view class="container container_setup">
		<view class="body">
			<!-- #ifdef MP-WEIXIN -->
			<view class="body_content">
			<!-- #endif -->

				<uni-forms class="body_content" :modelValue="formData">
					<uni-forms-item label="原手机号" name="oldphone">
						<input type="number" v-model="formData.oldphone" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="新手机号" name="newphone">
						<input type="number" v-model="formData.newphone" placeholder="请输入新手机号" />
					</uni-forms-item>

					<view class="bodybox_style">
						<uni-forms-item label="验证码" name="code">
							<input type="text" v-model="formData.code" placeholder="请输入验证码" />
						</uni-forms-item>

						<view v-if="btnShow" class="code_btn" @click="captchaShow">
							获取
						</view>
						<view v-else class="time_btn">
							{{btnNum}}秒
						</view>
					</view>
				</uni-forms>
			<!-- #ifdef MP-WEIXIN -->
			</view>
			<!-- #endif -->

		</view>
		<!-- 底部按钮 -->
		<view class="footer">
			<view :class="['btn',btnFlag?'checkBtn':'']" @click="submitForm">
				修改手机号
			</view>
		</view>
		<captchaVue :showCode="showCode" @completeShow="completeShow"></captchaVue>
	</view>
</template>

<script setup>
	import captchaVue from '../../components/captcha/captcha.vue';
	import {
		ref,
		reactive,
		watch
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		editTel as changePhone,
		sendSms as sendSMS
	} from "@/api/user.js"
	import {
		getItem,
		setItem
	} from "@/utils/storage.js"

	// 验证码按钮
	const btnShow = ref(true)
	const btnNum = ref(120)
	const btnFlag = ref(false)
	const formData = reactive({
		oldphone: '',
		newphone: '',
		code: ''
	})
	const showCode = ref(false)
	// 点击显示验证码
	function captchaShow() {
		showCode.value = true
		console.log(showCode.value, '验证码')
	}
	// 验证码
	const timeChange = () => {
		console.log(btnNum.value)
		let inter = setInterval(() => {
			btnNum.value--
			if (btnNum.value == 0) {
				clearInterval()
				btnShow.value = true
			}
		}, 1000)
	}
	// 验证码关闭或返回
	const completeShow = (res) => {
		console.log(res, '返回')
		// event  edittel 修改手机号 mobilelogin手机号登录 register 注册
		if (res == true) {

			sendSMS({
				tel: formData.value.newphone,
				event: 'edittel'
			}).then(res => {
				// console.log(res)
				uni.showToast({
					title: '验证码已成功发送'
				})
				btnNum.value = 120
				btnShow.value = false
				timeChange()
			}).catch(err => {
				console.log(err)
			})
		}
		showCode.value = false
	}

	// 监听判断按钮是否能够点击
	watch(() => [formData.oldphone, formData.newphone, formData.code], (newData) => {
		// console.log(newData)
		if (formData.oldphone && formData.newphone && formData.code) {
			btnFlag.value = true
		} else {
			btnFlag.value = false
		}
	})
	const user = ref({})
	onShow(() => {
		if (getItem('userInfo')) {
			user.value = getItem('userInfo')
			console.log(user.value, 'user')
		}
	})

	const submitForm = () => {
		console.log(formData, getItem('token'))
		// if (btnFlag) {
		// newtel 新  tel 旧  captcha 验证码
		if (btnFlag.value == true) {
			if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(formData.oldphone)) {
				uni.showToast({
					title: '请正确输入旧手机号',
					icon: 'error'
				})
			} else if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(formData
					.newphone)) {
				uni.showToast({
					title: '请正确输入新手机号',
					icon: 'error'
				})
			} else {
				changePhone({
					tel: formData.oldphone,
					newtel: formData.newphone,
					captcha: formData.code
				}).then(res => {
					console.log(res)
					if (res.msg == '修改成功') {
						uni.showToast({
							title: res.msg
						})
						user.value.tel = formData.newphone
						setItem('user', user)
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			}
		} else {
			uni.showToast({
				title: '请全部输入',
				icon: 'error'
			})
		}

		// }

	}
</script>

<style lang="less" scoped>
	.container_setup {
		display: flex;
		flex-direction: column;

		.not_body {
			.body_content {
				background: #fff;
				padding: 30rpx;

			}

			.uni-forms-item__content {

				uni-input,
				.uni-input-input {
					height: 100%;
				}
			}

			.bodybox_style {
				display: flex;
				justify-content: space-between;
			}
		}

		.body {
			flex: 1;
			padding-top: 20rpx;

			.body_content,
			.uni-forms {
				background: #fff !important;
				padding: 30rpx !important;

			}

			.uni-forms-item__content {

				uni-input,
				.uni-input-input {
					height: 100%;
				}
			}

			.bodybox_style,
			.uni-forms-item {
				display: flex;
				justify-content: space-between;
			}

			.code_btn {
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 10rpx;
				padding: 0 16rpx;
				text-align: center;
				background: #f7c585;
				box-sizing: border-box;
				min-width: 160rpx;
			}

			.time_btn {
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 10rpx;
				text-align: center;
				background: #c5c5c5;
				color: #efefef;
				box-sizing: border-box;
				min-width: 160rpx;
			}
		}

		.not_body {
			flex: 1;
			padding-top: 30%;

			.btn {}
		}

		.footer {
			width: 100%;
			padding: 20rpx 40rpx;
			box-sizing: border-box;

			.btn {
				color: #fff;
				width: 100%;
				border-radius: 100rpx;
				line-height: 100rpx;
				text-align: center;
				background: #c5c3c3;
				font-size: 40rpx;
			}

			.checkBtn {
				background: orangered;
			}
		}
	}
</style>